import React from 'react';
import { Link } from "react-router-dom";
import { useNavigate } from 'react-router';

function TargeList(props) {
    // console.log(232323, props);
    const navigate = useNavigate()
    let { targetList } = props
    console.log(22201111, targetList);
    return (<div className="purpose">
        <h4>目的地推荐</h4>
        <div  >
            {targetList.map((item) => (
                <div className="purpose2" onClick={() => { navigate("/target", { state: { address: item.address, desc: item.desc, imageUrl: item.imageUrl, name: item.name } }) }} key={item.id}>
                    <img src={item.imageUrl} alt=""></img>
                    <div className="purpose2-1">
                        <h5>{item.name}</h5>
                        <span>{item.desc}</span>
                        <span className="place">{item.address}</span>
                    </div>
                </div>
            ))}
        </div>
    </div>);
}

export default TargeList;